<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();//获得项目的根目录，上下文路径
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>超市账单管理系统</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		//getRoles();
		//1、aJax
		function getRoles() {
			//2、创建对象
			var xmlHttpRequest;
			if (window.XMLHttpRequest) {
				//除了IE5、6之外的所有浏览器支持
				xmlHttpRequest = new XMLHttpRequest();
			} else {
				xmlHttpRequest = new ActiveObject("Microsft.XMLHTTP");
			}
			//3、监听对象是事件变化
			xmlHttpRequest.onreadystatechange = function() {
				if (xmlHttpRequest.readyState == 4
						&& xmlHttpRequest.status == 200) {
					var msg = xmlHttpRequest.responseText;
					//msg="[{},{},{}]"
					//console.log(msg);
					//JSON.parse(msg):把字符串转换成数组 "[{},{},{}]"--->[{},{},{}]
					msg = JSON.parse(msg);
					var userRole = $("#userRole");
					userRole.empty();
					$(msg).each(
							function() {
								var option = "<option value='"+this.id+"'>"
										+ this.roleName + "</option>";
								userRole.append(option);
							});
				}
			}
			//4、打开流通道
			xmlHttpRequest.open("GET", "getAllRoles.html?name=tom", true);
			//5、发送请求
			xmlHttpRequest.send();
		}

		//$ajax
		//textAjax();
		function textAjax() {
			$.ajax({
				//请求的地址
				url : "getAllRoles.html",
				//请求方式
				type : "POST",
				//携带的参数
				data : {
					name : "sam",
					age : 20
				},
				//请求成功的回调函数,data是服务器的返回值
				success : function(data, status, xmlHttpRequest) {
					//data:返回的数据对象==XMLHttpRequest.responsJSON
					console.log(data);
					//请求状态status:success==XMLHttpRequest.statusText
					console.log(status);
					//xmlHttpRequest:XMLHttpRequest对象
					console.log(xmlHttpRequest);
					var userRole = $("#userRole");
					userRole.empty();
					$(data).each(
							function() {
								var option = "<option value='"+this.id+"'>"
										+ this.roleName + "</option>";
								userRole.append(option);
							});
				},
				//请求失败的回调函数
				error : function(xmlHttpRequest, status, exception) {
					console.log("错误返回的结果:" + xmlHttpRequest);
					console.log("错误请求类型:" + status);
					console.log("错误异常类型:" + exception);
				},
				//请求结束的回调函数，无论是否成功
				complete : function(xmlHttpRequest, status) {
					console.log(xmlHttpRequest);
					console.log(status);
				},
				//是否可以缓存
				cache : false,
				//是否同步
				async : true,
				//期望服务器返回的数据类型
				dataType : "json"
			});
		}

		//post请求
		//testPost();
		function testPost() {
			$.post(
			//地址
			"getAllRoles.html", {
				name : "sam",
				age : 20
			}, function(data) {
				var userRole = $("#userRole");
				userRole.empty();
				$(data).each(
						function() {
							var option = "<option value='"+this.id+"'>"
									+ this.roleName + "</option>";
							userRole.append(option);
						});
			}, "json");
		}
		//get请求
		testGet();
		function testGet() {
			$.post(
			//地址
			"getAllRoles.html", {
				name : "sam",
				age : 20
			}, function(data) {
				var userRole = $("#userRole");
				userRole.empty();
				$(data).each(
						function() {
							var option = "<option value='"+this.id+"'>"
									+ this.roleName + "</option>";
							userRole.append(option);
						});
			}, "json");
		}
	});

	//1、测试用户编码是否唯一$.ajax()，表单验证
	$(function() {
		$("#userCode").blur(function() {
			testUserCode($(this));
		});
	});

	function testUserCode(t) {
		var v = t.val();
		var sp = t.next();
		var div = t.parent();
		var reg = /^[a-zA-Z]\w{5,11}$/;
		sp.empty();
		var flag = false;
		if (v.length == 0) {
			sp.html("编码不能为空！").css("color", "red");
			return false;
	    } else if (!reg.test(v)) {
	    	sp.html("编码6-12位字母开头！").css("color", "red");
	    	return false;
	    } 
		$.ajax({
			url : "testUserCode.html",
			data : {
				userCode : v
			},
			type : "POST",
			dataType : "json",
			success : function(res) {
				//如果占用返回false，否则反回true
				console.log(res);
				flag = res.result;
				if (!flag) {
					sp.html(v + "不可用");
					div.removeClass("ok").addClass("error");
				} else {
					sp.html(v + "可用").css("color", "green");
					div.removeClass("error").addClass("ok");
				}
			},
			error : function(e) {
				alert("请求出错了，" + e);
			},
			cache : false,
			//同步请求
			async : false
		});
		return flag;
	}
	
	//2、测试用户名是否唯一$.post()
	$(function(){
		$("#userName").blur(function () {
			testUserName($(this));
		});
	});
	function testUserName(t){
		//1
		var v= t.val();
		var sp = t.next();
		var div = t.parent();
		sp.empty();
		$.ajaxSettings.async=false;//设置ajax同步
		var flag = false ;
		if (v.length == 0) {
			sp.html("用户名不能为空！").css("color", "red");
			return false;
	    }else if(/^\s+$/gi.test(v)){
	    	sp.html('不能全为空格').css("color", "red");
	    	return false;
	    }
		//2
		$.post(
			"testUserName.html",
			{
				userName :v
			},
			function(res){
				console.log(res);
				flag = res.result;
				if(!flag){
					sp.html(v+"不可用");
					div.removeClass("ok").addClass("error");
				}else{
					sp.html(v+"可用");
					div.removeClass("error").addClass("ok");
				}
			},
			"json"	
		);
		$.ajaxSettings.async=true;//设置ajax异步
		//3 
		return flag;
	}
	
	//3、密码验证
	$(function(){
		$("#userPassword").blur(function() {
			testPassWord($(this));
		});
	});
	
	function testPassWord(t){
		var v= t.val();
		var sp = t.next();
		sp.empty();
		var reg = /^\w{6,20}$/;
		if (v.length == 0) {
			sp.html("密码不能为空！").css("color", "red");
			return false;
	    } else if (!reg.test(v)) {
	    	sp.html("密码6-20位！").css("color", "red");
	    	return false;
	    }else{
	    	sp.html("&radic;").css("color", "green");
	        return true;
	    }
	}
	
	$(function(){
		$("#userRemi").blur(function() {
			testUserRemi($(this));
		});
	});
	
	function testUserRemi(t){
		var v= t.val();
		var sp = t.next();
		if (v.length == 0) {
			sp.html("不能为空！").css("color", "red");
			return false;
	    } else if (v!=$("#userPassword").val()) {
	    	sp.html("两次输入的密码必须一致！").css("color", "red");
	    	return false;
	    }else{
	    	sp.html("&radic;").css("color", "green");
	        return true;
	    }
	}
	
	//4、测试用户电话是否唯一$.get()
	$(function() {
		$("#phone").blur(function() {
			testPhone($(this));
		});
	});
	
	function testPhone(t) {
		var v= t.val();
		var sp = t.next();
		var div = t.parent();
		sp.empty();
		$.ajaxSettings.async=false;//设置ajax同步
		var flag = false ;
		var reg = /^1[3456789]\d{9}$/;
	    if (v.length == 0) {
	    	sp.html("电话不能为空！").css("color", "red");
	        return false;
	    } else if (!reg.test(v)) {
	    	sp.html("电话是1开头3456789第2位共11位数字！").css("color", "red");
	        return false;
	    } 
		//2
		$.get(
			"testPhone.html",
			{
				phone :v
			},
			function(res){
				console.log(res);
				flag = res.result;
				if(!flag){
					sp.html(v+"不可用");
					div.removeClass("ok").addClass("error");
				}else{
					sp.html(v+"可用");
					div.removeClass("error").addClass("ok").css("color", "green");
				}
			},
			"json"	
		);
		$.ajaxSettings.async=true;//设置ajax异步
		//3 
		return flag;
	}
	
	$(function () {
		$("#sub").click(function(){
			var flag=testPhone($("#phone"))&testUserRemi($("#userRemi"))&testPassWord($("#userPassword"))
			&testUserName($("#userName"))&testUserCode($("#userCode"));
			if(flag==0){
				return false;
			}
			return true;
		});
	}); 
</script>
</head>
<body>
	<!--头部-->
	<!-- <button id="btn">ajax</button> -->
	<header class="publicHeader">
		<h1>超市账单管理系统</h1>
		<div class="publicHeaderR">
			<p>
				<span>下午好！</span>
				<span style="color: #fff21b"> ${USER_LOGIN.userName }</span>
				, 欢迎你！
			</p>
			<a href="logOut.html">退出</a>
		</div>
	</header>
	<!--时间-->
	<section class="publicTime">
		<span id="time">2015年1月1日 11:11 星期一</span>
		<a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
	</section>
	<!--主体内容-->
	<section class="publicMian ">
		<div class="left">
			<h2 class="leftH2">
				<span class="span1"></span>
				功能列表
				<span></span>
			</h2>
			<nav>
				<ul class="list">
					<li><a href="billList.html">账单管理</a></li>
					<li><a href="providerList.ht">供应商管理</a></li>
					<li id="active"><a href="userList.html">用户管理</a></li>
					<li><a href="roleList.html">角色管理</a></li>
					<li><a href="password.html">密码修改</a></li>
					 <li><a href="goodsList.du">商品购买</a></li>
					<li><a href="logOut.html">退出系统</a></li>
				</ul>
			</nav>
		</div>
		<div class="right">
			<div class="location">
				<strong>你现在所在的位置是:</strong>
				<span>用户管理页面 >> 用户添加页面</span>
			</div>
			<div class="providerAdd">
				<!-- 执行文件上传必须是：post 、multipart/form-data -->
				<form action="doUserUpdate.html" method="post" enctype="multipart/form-data">
					<!--div的class 为error是验证错误，ok是验证成功-->
					<div class="">
						<label for="userCode">用户编码：</label>
						<input type="text" name="userCode" id="userCode" value="${USERUPDATE.userCode}"/>
						<span>*请输入用户编码，且不能重复</span>
					</div>
					<div>
						<label for="userName">用户名称：</label>
						<input type="text" name="userName" id="userName" value="${USERUPDATE.userName}"/>
						<span>*请输入用户名称</span>
					</div>
					<div>
						<label for="userPassword">用户密码：</label>
						<input type="password" name="userPassword" id="userPassword"  value="${USERUPDATE.userPassword}"/>
						<span>*密码长度必须大于6位小于20位</span>
					</div>
					<div>
						<label for="userRemi">确认密码：</label>
						<input type="password" name="userRemi" id="userRemi" />
						<span>*请输入确认密码</span>
					</div>
					<div>
						<label for="gender">用户性别：</label> <select name="gender" id="gender" style="width: 272px;">
							<option value="2">男</option>
							<option value="1">女</option>
						</select>
						<span></span>
					</div>
					<div>
						<label for="data">出生日期：</label>
						<input type="date" name="birthday" id="birthday"  value="<fmt:formatDate value="${USERUPDATE.birthday}" 
						pattern="yyyy-MM-dd HH:mm:ss" />"/>
						<span>*</span>
					</div>
					<div>
						<label for="phone">用户电话：</label>
						<input type="text" name="phone" id="phone" value="${USERUPDATE.phone}" />
						<span>*</span>
					</div>
					<div>
						<label for="address">用户地址：</label>
						<input type="text" name="address" id="address" value="${USERUPDATE.address}"  />
					</div>
					<div>
						<label for="pic">用户图片：</label>
						<input type="file" name="pic" id="pic" />
					</div>
					<div>
						<label for="userRole">用户类型：</label> 
						<select name="userRole" id="userRole" style="width: 272px;"></select>
					</div>
					<input  type="hidden" name = "id" value="${USERUPDATE.id}"/>
					<div class="providerAddBtn">
						<input type="submit" style="padding: 0px;" value="提交" />
						<input type="reset" style="padding: 0px; width: 100px; font-size: 14px;" />
					</div>
				</form>
			</div>
		</div>
	</section>
	<footer class="footer"> 版权归北大青鸟 </footer>
	<script src="js/time.js"></script>
</body>
</html>